; (function () {

    $(window).load(function () {

        $("#header").load("./header.html")
        $("#footer").load("./footer.html")

        //页面加载数据
        //页面加载就要得到数据,把id发送到后台等到该id对应的数据
        let pid = location.search.split("?")[1].split("=")[1];
        //再把数据渲染
        $.get(`./api/goodsinfo/${pid}`).then((res) => {
            //把服务器的到的数据藏起来
            $(".contentRight")[0].dataInfo = res[0];
            //填充放大镜图片

            // console.log(res);
            $("#middleImg").children("img").attr("src", res[0].p_img_middle[0]);
            $("#small ul li").children("img").each((index, el) => {
                $(el).attr("src", res[0].p_imgs_small[index])
            })
            $("#bigImg").attr("src", res[0].p_imgs_big[0])


            if (pid == 093) {
                $("#small ul").children("li").on("click", function () {
                    $(this).css("border", "1px solid blue").siblings().css("border", 0)
                    var $tmpindex = $(this).index() + 1;
                    $("#middleImg").children("img").attr("src", `images/${$tmpindex}_2.png`)
                    $("#bigImg").attr("src", `images/${$tmpindex}_3.png`)
                })
            } else if (pid == 099) {
                $("#small ul").children("li").on("click", function () {
                    $(this).css("border", "1px solid blue").siblings().css("border", 0)
                    var $tmpindex = $(this).index() + 11;
                    $("#middleImg").children("img").attr("src", `images/${$tmpindex}_2.png`)
                    $("#bigImg").attr("src", `images/${$tmpindex}_3.png`)
                })
            } else {
                $("#small ul").children("li").on("click", function () {
                    $(this).css("border", "1px solid blue").siblings().css("border", 0)
                    var $tmpindex = $(this).index() + 6;
                    $("#middleImg").children("img").attr("src", `images/${$tmpindex}_2.png`)
                    $("#bigImg").attr("src", `images/${$tmpindex}_3.png`)
                })
            }


            //添加到购物车
            $(".zuzhuang").on("click", "#addCart", function () {
                if ($("#num").val() <= 0) {
                    $(".errorNum").text("你买负的是几个意思?")
                    return false;
                } else {
                    // $(".addTocar").fadeTo(500, 1, function () { })
                    $.cookie("number", $("#num").val(), 10)
                    $(".errorNum").text("");
                    // var saveObj = $(this).parents(".zuzhuang")
                    //     .siblings(".content").children("contentRight")[0].dataInfo;
                    var saveObj = $(".contentRight")[0].dataInfo = res[0];
                    delete (saveObj.p_imgs_small);
                    delete (saveObj.p_img_middle);
                    delete (saveObj.p_imgs_big);
                    delete (saveObj.p_rule);
                    delete (saveObj.p_score);
                    delete (saveObj.p_message);

                    //给saveObj绑定购买数量
                    saveObj.p_number = $("#num").val();
                    //得到当前登录着的u_id
                    if (localStorage.getItem("users") != null) {
                        saveObj.u_id = JSON.parse(localStorage.getItem("users")).uid;
                        console.log(saveObj)
                    } else {
                        layer.confirm("请重新登录!", {
                            btn: ["确定", "不要"]
                        }, () => {
                            location = "./login.html"
                        }, () => {

                        })
                        return false;
                    }
                    $.ajax({
                        url: "./api/addcart",
                        type: "post",
                        data: saveObj
                    }).then(function (res) {
                        layer.msg(res.msg)
                    })

                }

            })
            $(".closeCar").on("click", function () {
                $(".addTocar").hide();
            })

         

            //动态加载变换的数据
            res.forEach(el => {
                var strHtml = "";
                strHtml += ` <p>新品</p>
                <h3>${el.p_name}</h2>
                    <p>${el.p_deps}</p>
                    <h1 class="price">¥${el.p_price}</h1>
                    <div id="default"></div>
                    <p>${el.p_score}</p>
                    <p>商品货号:${el.p_id}</p>
                    <p>${el.p_message}</p>
                    <p><img src="./images/goods1_06.png"><a href="JavaScript:void(0)" id="tuihuo">退换货政策</a></p>
                    <p class="rightP"><img src="./images/goods1_09.png"><a href="JavaScript:void(0)">一对一设计咨询</a></p>
                    <p>${el.p_rule}</p>
                    <p><img src="./images/goods1_12.png"><a href="JavaScript:void(0)">定制组合</a></p>
                    <div class="number">
                        <span>数量</span>
                        <input type="text" id="num" maxlength="3" size="3" value="1">
                        <div class="errorNum"></div>
                    </div>`

                $(".contentRight").html(strHtml)
            });


            //执行放大镜函数
            Big();


            //五星评分
            $.fn.raty.defaults.path = 'images';
            $('#default').raty({ number: 5 });

            //淡入淡出
            $("#tuihuo").on("click", function () {
                $(".goodsPolicy").fadeTo(1000, 1, function () { })

            })

            $("#close").on("click", function () {
                $(".goodsPolicy").hide();
            })

            $("#sayOne").on("click", function () {
                $(".bigBox").show();
                $(".Wanserver").fadeTo(500, 1, function () { })

            })
            $(".close").on("click", function () {
                $(".Wanserver").hide();
                $(".bigBox").hide();
            })

            $("#sayTwo").on("click", function () {
                $(".bigBox").show();
                $(".Yiserver").fadeTo(500, 1, function () { })
            })
            $(".close").on("click", function () {
                $(".Yiserver").hide();
                $(".bigBox").hide();
            })

            $("#addHeartlist").on("mouseenter", function () {
                $(this).css("background", "rgb(245,100,38)")
            })
            $("#addHeartlist").on("mouseleave", function () {
                $(this).css("background", "#767676")
            })
        })


        //放大镜
        function Big() {
            var $smallImg = $("#middleImg")
            var $smallArea = $("#middleArea");
            var $bigArea = $("#bigAera");
            var $bigImg = $("#bigImg");

            $smallArea.css("width", ($smallImg.width() / $bigImg.width()) * $bigArea.width())
            $smallArea.css("height", ($smallImg.height() / $bigImg.height()) * $bigArea.height())

            //比例
            var $scale = $bigArea.width() / $smallArea.width();

            $smallImg.on("mouseenter", function () {
                $bigArea.show();
                $smallArea.show();

                $smallImg.on("mousemove", (evt) => {
                    var disX = evt.pageX - $(evt.currentTarget).offset().left - $smallArea.width() / 2;
                    var disY = evt.pageY - $(evt.currentTarget).offset().top - $smallArea.width() / 2;

                    if (disX <= 0) {
                        disX = 0;
                    }
                    if (disY <= 0) {
                        disY = 0;
                    }
                    if (disX >= ($smallImg.width() - $smallArea.width())) {
                        disX = $smallImg.width() - $smallArea.width();
                    }
                    if (disY >= ($smallImg.height() - $smallArea.height())) {
                        disY = $smallImg.height() - $smallArea.height();
                    }

                    $smallArea.css({
                        left: disX,
                        top: disY
                    });

                    $bigImg.css({
                        left: (disX * $scale * -1),
                        top: (disY * $scale * -1),
                    });

                })
                $smallImg.on("mouseleave", function () {
                    $smallArea.hide();
                    $bigArea.hide();
                })
            })
        }







        //Tab栏
        $(".TabUl ul ").children("li").eq(0).siblings("li").css("margin-left", "7px")
        $(".TabUl ul ").children("li").on("mouseenter", function () {
            $(this).addClass("currentA").siblings().removeClass("currentA")
        })
        $(".TabUl ul ").children("li").on("click", function () {
            $index = $(this).index();
            $(".TabContent").children("div").eq($index).show().siblings().hide();
        })


    })

})()